var TodoList2 = React.createClass({
	getInitialState: function () {
	      return {
	          todolist: ["0","1","2","3","last"]
	      };
	},
	  // 接收一个传入的数据，并将它实时更新到组件的 state 中，以便组件根据数据重新render
	 // 只要改变了 state ，react自动执行 reader 计算
	handleChange: function (rows) {
	     this.setState({
	         todolist: rows
	     });
	 },
    render: function () {
        return (
         	<div>
                <TypeNew onAdd={this.handleChange} todolist={this.state.todolist} />
                <ListTodo onDel={this.handleChange} todolist={this.state.todolist} />
            </div>
        );
    }
});

var TypeNew = React.createClass({
	handleAdd: function (e) {
		debugger;
         e.preventDefault();
         // 通过 refs 获取dom元素，然后获取输入的内容
//       var inputDom = this.refs.inputnew.getDOMNode();
         var inputDom = this.refs.inputnew;
         var newthing = inputDom.value.trim();
         // 获取传入的todolist数据
         var rows = this.props.todolist;
         if (newthing !== '') {
             // 更新数据，并使用 onAdd 更新到 TodoList 组件的 state 中
             rows.push(newthing);
             this.props.onAdd(rows);
         }
         inputDom.value = '';
    },
	render: function () {
		return (
		<form>
		 	<input type="button" onClick={this.handleAdd} value="add"/>
         	<input type="text" ref="inputnew" id="todo-new" placeholder="typing a newthing todo" autoComplete="off" />
         </form>
		);
	}
});
		
var ListTodo = React.createClass({
	handleDel: function (e) {
		debugger;
             var delIndex = e.target.getAttribute('data-key');
             // 更新数据，并使用 onDel 更新到 TodoList 的 state 中，以便 React自动render
             this.props.todolist.splice(delIndex, 1);
             this.props.onDel(this.props.todolist);
    },
	render: function () {
		return (
			<ul id="todo-list">
	     	{
				this.props.todolist.map(function (item, i) {
                         return (
                             <li key={i}>
                                 <label>{item}</label>
                                 <button onClick={this.handleDel} data-key={i}>delete</button>
                             </li>
                         )
                     }.bind(this)) // {/* 绑定函数的执行this - 以便 this.handleDel */}
	     	}
			</ul>
		);
	}
});
		
ReactDOM.render(
	<article>
		<h1 style={{color: 'orange'}}>Hello World!</h1>
		<TodoList2/>
	</article>,
	document.getElementById("example2") 
);